<template>
  <div class="dept-select-main">
    <el-tree-select
      v-model="selectDepts"
      :props="defaultProps"
      :data="deptsTreeData"
      placeholder="请选择部门"
      @change="getDeptsId"
    />
    <el-select
      v-bind="$attrs"
      v-model="selectedUsers"
      placeholder="请选择人员"
      @change="change"
    >
      <el-option
        v-for="item in selectUsersArr"
        :key="item.userId"
        :value="item.userId"
        :label="item.realName"
      />
    </el-select>
  </div>
</template>
<script setup lang="ts">
import { onBeforeMount, ref, watchEffect} from "vue";
import { deptApi } from "@/api/system/dept";
import type { DeptModel } from "@/api/system/dept/types";
import type { UserModel } from "@/api/system/user/types";
import { userApi } from "@/api/system/user/index";
import { userLogUser } from "@/api/system/userLog/index";


// 选择用户
let selectedUsers = defineModel<Array<string> | string>();
// 选择的部门
let selectDepts = ref<string>("");
// 组件部门数据
let deptsTreeData = ref<DeptModel[]>([]);
// 根据条件获取到的用户数据 下拉列表中的数据
let selectUsersArr = ref<Array<UserModel>>([]);
// 选中用户数据Map
let usersData = ref<Map<string, UserModel>>(new Map<string, UserModel>());
// 存档选中的人员的map数组
const defaultProps = {
  children: "children",
  label: "deptName",
};

// 选择人员变化
function change(values: string[]) {

  // 判断使用组件的时候是单选
  if(typeof values === "string") {
    // 根据选中人员的ID 去获取对应的人员信息填入到下拉列表中去
    selectUsersArr.value.forEach(item => {
      if(item.userId === values) {
        usersData.value.set(values, item);
      }
    });

  }else {
    // 多选
    values.forEach((item) => {
      // 判断选择人员信息数据中是否存在当前id的数据
      if (!usersData.value.has(item)) {
        // 不存在的情况将信息放入map中
        selectUsersArr.value.forEach((user) => {
          usersData.value.set(item, user);
        });
      }
    });
  }
}

watchEffect(() => {
  if(selectedUsers.value !== "" || selectedUsers.value.length > 0) {
    if(typeof selectedUsers.value === "string") {
      // 单选
      userLogUser(selectedUsers.value as string).then(({ data }) => {
        usersData.value.set(selectedUsers.value as string, data);
        selectUsersArr.value.splice(selectUsersArr.value.findIndex(item => item.userId === selectedUsers.value as string), 1, data);
      });
    }else {
      // 多选
      selectedUsers.value?.forEach((key) => {
        if (!usersData.value.has(key)) {
          userLogUser(key).then(({ data }) => {
            selectUsersArr.value.push(data);
          });
        }
      });
    }
  }
});
// 获取所有部门
onBeforeMount(() => {
  deptApi.findList().then(({ data }) => {
    deptsTreeData.value = data.results;
  });
});
// 点击部门获取部门下的人员
function getDeptsId(value: string) {
  userApi
    .getSelectUsersList({ deptId: value })
    .then(({ data: { results } }) => {
      selectUsersArr.value = results.map((item) => {
        return { ...item, userId: item.key, realName: item.value };
      });
    });
}
</script>
<style scoped lang="scss">
.dept-select-main {
  width: 100%;
}
</style>
